<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分享令牌调试工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>分享令牌调试工具</h2>
        
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>测试分享令牌</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="shareToken" class="form-label">分享令牌:</label>
                            <input type="text" class="form-control" id="shareToken" placeholder="输入分享令牌">
                        </div>
                        <button class="btn btn-primary" onclick="testShareToken()">测试令牌</button>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>创建新分享</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="projectId" class="form-label">项目ID:</label>
                            <input type="number" class="form-control" id="projectId" placeholder="输入项目ID">
                        </div>
                        <button class="btn btn-success" onclick="createShare()">创建分享</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>调试结果</h5>
                    </div>
                    <div class="card-body">
                        <pre id="debugResult" class="bg-light p-3" style="min-height: 200px;">等待调试结果...</pre>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>所有项目列表</h5>
                    </div>
                    <div class="card-body">
                        <button class="btn btn-info" onclick="loadAllProjects()">加载所有项目</button>
                        <div id="projectsList" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function log(message) {
            const debugResult = document.getElementById('debugResult');
            const timestamp = new Date().toLocaleTimeString();
            debugResult.textContent += `[${timestamp}] ${message}\n`;
            console.log(message);
        }
        
        function clearLog() {
            document.getElementById('debugResult').textContent = '';
        }
        
        async function testShareToken() {
            const shareToken = document.getElementById('shareToken').value.trim();
            if (!shareToken) {
                alert('请输入分享令牌');
                return;
            }
            
            clearLog();
            log(`测试分享令牌: ${shareToken}`);
            
            try {
                const response = await fetch(`/project-shares/token/${shareToken}`);
                log(`响应状态: ${response.status} ${response.statusText}`);
                
                if (response.ok) {
                    const data = await response.json();
                    log('分享数据:');
                    log(JSON.stringify(data, null, 2));
                    
                    if (data.project) {
                        log('\n项目信息:');
                        log(`项目ID: ${data.project.id}`);
                        log(`项目名称: ${data.project.name}`);
                        log(`字段类型数量: ${data.project.fieldTypes ? data.project.fieldTypes.length : 0}`);
                        if (data.project.fieldTypes) {
                            log('字段类型详情:');
                            data.project.fieldTypes.forEach((ft, index) => {
                                log(`  ${index + 1}. ${ft.label} (${ft.key}) - ${ft.type} - 启用: ${ft.enabled}`);
                            });
                        }
                    }
                } else {
                    const errorText = await response.text();
                    log(`错误响应: ${errorText}`);
                }
            } catch (error) {
                log(`请求失败: ${error.message}`);
            }
        }
        
        async function createShare() {
            const projectId = document.getElementById('projectId').value.trim();
            if (!projectId) {
                alert('请输入项目ID');
                return;
            }
            
            const token = localStorage.getItem('token');
            if (!token) {
                alert('请先登录');
                return;
            }
            
            clearLog();
            log(`为项目 ${projectId} 创建分享`);
            
            try {
                const response = await fetch(`/project-shares/project/${projectId}`, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                log(`响应状态: ${response.status} ${response.statusText}`);
                
                if (response.ok) {
                    const data = await response.json();
                    log('分享创建成功:');
                    log(JSON.stringify(data, null, 2));
                    log(`\n分享令牌: ${data.shareToken}`);
                    log(`二维码链接: ${data.qrCodeData}`);
                } else {
                    const errorText = await response.text();
                    log(`创建失败: ${errorText}`);
                }
            } catch (error) {
                log(`请求失败: ${error.message}`);
            }
        }
        
        async function loadAllProjects() {
            const token = localStorage.getItem('token');
            if (!token) {
                alert('请先登录');
                return;
            }
            
            try {
                const response = await fetch('/projects/my', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
                
                if (response.ok) {
                    const projects = await response.json();
                    const projectsList = document.getElementById('projectsList');
                    
                    if (projects.length === 0) {
                        projectsList.innerHTML = '<p class="text-muted">没有找到项目</p>';
                        return;
                    }
                    
                    let html = '<div class="row">';
                    projects.forEach(project => {
                        const fieldTypesCount = project.fieldTypes ? project.fieldTypes.length : 0;
                        html += `
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title">${project.name}</h6>
                                        <p class="card-text">
                                            <small class="text-muted">ID: ${project.id}</small><br>
                                            <small class="text-muted">字段数: ${fieldTypesCount}</small>
                                        </p>
                                        <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('projectId').value='${project.id}'">选择</button>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    html += '</div>';
                    projectsList.innerHTML = html;
                } else {
                    document.getElementById('projectsList').innerHTML = '<p class="text-danger">加载项目失败</p>';
                }
            } catch (error) {
                document.getElementById('projectsList').innerHTML = `<p class="text-danger">加载项目失败: ${error.message}</p>`;
            }
        }
    </script>
</body>
</html>